<template>
  <div class="app-footer">
    <!-- 联系我们 -->
    <div class="contact">
        <div class="container">
            <!-- 客服服务 -->
            <dl>
                <dt>客服服务</dt>
                <dd><i class="iconfont icon-kefu"></i> 在线客服</dd>
                <dd><i class="iconfont icon-question"></i>问题反馈</dd>
            </dl>
            <!-- 关注我们 -->
            <dl >
                <dt>关注我们</dt>
                <dd><i class="iconfont icon-weixin"></i> 公众号</dd>
                <dd><i class="iconfont icon-weibo"></i> 微博</dd>
            </dl>
            <!-- 下载APP -->
            <dl >
                <dt>下载APP </dt>
                <dd class="qrcode"><img src="@/assets/images/qrcode.jpg" alt=""></dd>
                <dd class="download">
                    <span>扫描二维码</span>
                    <span>立马下载APP</span>
                    <a href="javascript:;">下载页面</a>
                </dd>
            </dl>
            <!-- 服务热线 -->
            <dl>
                <dt>服务热线</dt>
                <dd class="hotline">400-0000-000<small>周一至周日 8:00-18:00</small></dd>
            </dl>
        </div>
    </div>

    <!-- 其他 -->
    <div class="other">
        <div class="container">
            <div class="slogan">
                <!-- 价格亲民 -->
                <a href="javascript:;">
                    <i class="iconfont icon-footer01"></i>
                    <span>价格亲民</span>
                </a>
                <!-- 物流快捷 -->
                <a href="javascript:;">
                    <i class="iconfont icon-footer02"></i>
                    <span>物流快捷</span>
                </a>
                <!-- 品质新鲜 -->
                <a href="javascript:;">
                    <i class="iconfont icon-footer03"></i>
                    <span>品质新鲜</span>
                </a>
            </div>
            <!-- 版权信息 -->
            <div class="copyright">
                <p>
                    <a href="javascript:;">关于我们</a>
                    <a href="javascript:;">帮助中心</a>
                    <a href="javascript:;">售后服务</a>
                    <a href="javascript:;">配送与验收</a>
                    <a href="javascript:;">商务合作</a>
                    <a href="javascript:;">搜索推荐</a>
                    <a href="javascript:;">友情链接</a>
                </p>
                <p>CopyRight © 小兔鲜儿</p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.app-footer{
    background-color: #f5f5f5;
    padding-top: 20px;
    // 联系我们
    .contact{
        background-color: #fff;
        .container{
            display: flex;
            padding: 60px 0 40px 25px;
            overflow: hidden;
            dl{
                height: 190px;
                padding: 0 72px;
                text-align: center;
                border-right: 1px solid #f2f2f2;
                color:#999;
                &:first-child{
                    padding-left: 0;
                }
                &:last-child{
                    padding-right: 0;
                    border-right: none;
                }
                dt{
                    line-height: 1;
                    font-size: 18px;
                }
                dd{
                    margin:36px 12px 0 0;
                    float: left;
                    width: 92px;
                    height: 92px;
                    border: 1px solid #ccc;
                    .iconfont{
                        font-size: 36px;
                        display: block;
                        color: #666;
                        &:hover{
                            color:@themeColor;
                        }
                    }
                    &:last-child{
                        margin-right: 0;
                    }

                }
                // 二维码
                .qrcode{
                    width: 92px;
                    height: 92px;
                    padding: 7px;
                }
                .download{
                    border: none;
                    span{
                        display: block;
                    }
                    a{
                        display: block;
                        width: 100px;
                        height: 36px;
                        line-height: 36px;
                        background-color: @themeColor;
                        color: #fff;
                        margin-top: 6px;
                        border-radius: 2px;
                    }
                }
                .hotline{
                    padding-top: 20px;
                    border: none;
                    font-size: 22px;
                    width: auto;
                    height: auto;
                    color: #666;
                    small{
                        display: block;
                        font-size: 14px;
                        color: #999;
                    }
                }
            }

        }
    }

    // 其他
    .other{
        background-color: #333;
        .slogan{
            height: 178px;
            line-height: 58px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: #fff;
            border-bottom: 1px solid #434343;
            a{
                height: 58px;
                color: #fff;
                i{
                    font-size: 50px;
                    margin-right: 10px;
                    vertical-align: middle;
                }
                span{
                    font-size: 28px;
                    vertical-align: middle;
                    text-shadow: 0 0 1px #333;
                }
            }
        }
        .copyright{
            padding: 40px 0 60px 0;
            text-align: center;
            p {
                margin-bottom: 20px;
                a{
                    padding:0 15px;
                    border-right: 1px solid #fff;
                    color: #999;
                    &:last-child{
                        border-right: none;
                    }
                }
            }
        }
    }
}
</style>
